<script setup lang="ts">
import {ref, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useAppStore} from "@/store";

const store = useAppStore();

const user = computed(() => store.state.user);

const route = useRoute();
let nowPath = route.path;
let showJf = ref("");

if (nowPath === "/home/home") {
} else if (nowPath === "/home/digitalMap" || nowPath === "/home/points" || nowPath === "/home/safe") {
  showJf.value = "数字塍里";
}

const showIndex = ref("no");

const showSub = (tit: string) => {
  showIndex.value = tit;
};

const goTo = () => {
  routeTo('/bus/party-brand-notice');
  if (user.value.superAdmin) {

  }
}

const meun = ref([
  {
    title: "首页",
    children: null,
    path: "/home/home?pop=true"
  },
  {
    title: "塍心向党",
    children: null,
    path: "/home/loveParty?pop=true"
  },
  {
    title: "知塍晓政",
    children: null,
    path: "/home/partyPolitics?pop=true"
  },
  {
    title: "文明塍里",
    children: null,
    path: "/home/cultureHome?pop=true"
  },
  {
    title: "生活塍里",
    children: null,
    path: "/home/livHome?pop=true"
  },
  {
    title: "一塍千延",
    children: null,
    path: "/home/gatherHome?pop=true"
  },
  {
    title: "数字塍里",
    path: null,
    children: [
      {
        title: "数字地图",
        children: null,
        path: "/home/digitalMap?pop=true"
      },
      {
        title: "数字资产",
        children: null,
        path: "/home/points?pop=true"
      },
      {
        title: "安全管理",
        children: null,
        path: "/home/safe?pop=true"
      }
    ]
  }
]);

const router = useRouter();
const routeTo = (path: string | null) => {
  if (path) {
    router.push(path);
  }
};
</script>

<template>
  <div class="pageHeader">
    <img src="@/assets/images/screen/homeTop.png" alt=""/>
    <div class="pageHeader_title">
      <div class="left_title" @click="goTo">塍里村智慧管理平台</div>
      <div class="right_title">
        <div v-for="(item, index) in meun" :key="'subMenu' + index"
             :class="{ select_image: (item.path && item.path.indexOf(nowPath) != -1) || showJf === item.title }"
             @mouseenter="showSub(item.title)" @mouseleave="showSub('no')">
          <div class="show_border_bottom">
            <div @click="routeTo(item.path)" class="myButton"
                 :class="{ needHidden: item && item.children && showIndex === item.title }">
              {{ item.title }}
            </div>
            <div class="page_header_subtit_box" v-if="item.children">
              <transition name="show">
                <div v-show="showIndex === item.title">
                  <div class="page_header_subtit_div" :class="{ select_value: ite.path.indexOf(nowPath) !== -1 }"
                       v-for="(ite, ind) in item.children" :key="'miniMenu' + ind" @click="routeTo(ite.path)">
                    {{ ite.title }}
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.pageHeader {
  width: 100%;
  height: 6.9vh;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  .pageHeader_title {
    position: absolute;
    top: 0;
    height: 6.9vh;
    width: 100%;

    .left_title {
      position: absolute;
      top: 0.8vh;
      color: #f1f1f1;
      font-size: 1.8vw;
      padding-left: 3.5vw;
      letter-spacing: 0.2vw;
      font-weight: bold;
      font-style: italic;
      cursor: pointer;
    }

    .right_title {
      display: flex;
      position: absolute;
      left: 29.8vw;

      & > div {
        position: relative;
        width: 9.8vw;
        font-size: 1.2vw;
        color: #ffffff;
        text-align: center;
        transform: skewX(-28deg);
        height: 5.5vh;
        border-right: 2px solid;
        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;

        .myButton {
          cursor: pointer;
          color: white;
          transform: skewX(28deg) translateY(-50%) translateX(-50%);
          position: absolute;
          top: 50%;
          left: 50%;
          white-space: nowrap;
        }

        .needHidden {
          opacity: 0;
        }

        .page_header_subtit_box {
          position: absolute;
          width: 95%;
          right: 0;
          z-index: 99;
          top: 0.3vh;
          font-size: 0.9vw;
          font-weight: normal;

          .page_header_subtit_div {
            //transform: skewX(28deg);
            padding: 0.3vh 0;
            background: #112a3a;
          }

          .page_header_subtit_div:hover {
            color: #00fafa;
            background: #134552;
            cursor: pointer;
          }

          .select_value {
            color: #59eaff;
            //background: linear-gradient(0deg, #35a7c8 0%, rgba(17, 45, 102, 0) 100%);
          }
        }
      }

      .select_image {
        background: #134552;
        text-align: center;

        .show_border_bottom {
          width: 100%;
          height: 100%;
          border-bottom: 2px solid;
          border-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;
        }

        .myButton {
          color: #00fafa;
        }
      }
    }
  }
}
</style>
